<template>
  <div class="information">
    <titleText title="我的能力评估"></titleText>
    <div class="list" v-loading="loading">
      <div class="item" v-for="(item, index) in list" :key="index" @click="goAssess(item.freecourselist_id, item.freecourselist_kechengbiaoti)">
        <div class="item_top">
          <div class="item_img">
            <el-image fit="cover" :src="item.fengmiantu" :lazy="true" />
          </div>
          <div class="item_name">
            {{ item.freecourselist_kechengbiaoti }}
          </div>
        </div>
        <div class="item_bottom">
          <div class="item_bottom_le">已学习：{{ item.xuexijindu }}%</div>
          <div class="item_bottom_ri"></div>
        </div>
      </div>
      <div class="no_data" v-if="list.length == 0 && !loading">
        <img class="no_img" src="../../../assets/default/12.png" alt="" />
      </div>
    </div>
    <div class="margin_top">
        <paging
          :total="total"
          :pageSize="pageSize"
          @pageChange="pageChange"
        ></paging>
      </div>
  </div>
</template>


<script name="myAssess" setup>
import { post6620c66a3a7a9 } from "@/utils/api.js";
import titleText from "../titleText.vue";
import paging from "@/components/paging.vue";
import modalText from "@/components/modalText.vue";
import { ref, reactive, onMounted, inject } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const injectMessage = inject("$message");

onMounted(() => {
  getList();
});

let list = ref([]);
let total = ref(0);
let loading = ref(true);
let pageNum = ref(1);
let pageSize = ref(9);
function getList() {
  post6620c66a3a7a9({
    page: pageNum.value,
    list_rows: pageSize.value,
  }).then((res) => {
    console.log(res);
    loading.value = false;
    if (res.code == 1) {
      total.value = res.data.total;
      list.value = res.data.data;
    }
  });
}
// 分页
function pageChange(page) {
  pageNum.value = page;
  loading.value = true;
  getList();
}

function goAssess(aid, course_name) {
  router.push({
    path: "/MyAssess/assessDetails",
    query: {
        aid: aid,
        course_name: course_name
    }
  });
}
</script>

<style lang="scss" scoped>
.information {
  padding: 18px 16px;
  background: #fff;
  min-height: 437px;
  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    justify-items: flex-start;
    .item {
      width: 267px;
      height: 109px;
      border: 1px solid #e5e5e5;
      margin-top: 13px;
      padding: 10px;
      cursor: pointer;
      .item_top {
        display: flex;
        padding-bottom: 10px;
        border-bottom: 1px solid #e5e5e5;
        .item_img {
          width: 85px;
          height: 48px;
          margin-right: 8px;
          .el-image {
            width: 100%;
            height: 100%;
          }
        }
        .item_name {
            width: calc(100% - 93px);
          font-size: 8px;
          font-weight: 500;
          line-height: 12px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 4;
        }
      }
      .item_bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 10px;
        .item_bottom_le {
          font-size: 7px;
          color: #666;
        }
        .item_bottom_ri {
          .bottom_btn_1 {
            width: 50px;
            height: 20px;
            border-radius: 3px;
            background: #1f52ae;
            font-size: 8px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          }
          .bottom_btn_2 {
            width: 50px;
            height: 20px;
            border-radius: 3px;
            background: #e8edf7;
            font-size: 8px;
            color: #1f52ae;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.margin_top {
  margin-top: 8px;
}
.save_btn {
  width: 120px;
  height: 24px;
  background: #1f52ae;
  font-size: 8px;
  color: #fff;
  border-radius: 3px;
  margin: 24px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>